<template>
  <div class="yaml-editor">
    <h4>{{ title }}</h4>
    <codemirror ref="editor" v-model="jsonValue" :options="options" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

// // import "codemirror/lib/codemirror.css"
// // import "codemirror/theme/ayu-dark.css"
// // import "codemirror/mode/javascript/javascript"

type Prop = {
  title?: string;
};
const props = defineProps<Prop>();

const options = {
  value: "",
  mode: "application/json",
  theme: "ayu-dark",
  lineNumbers: true,
  tabSize: 2,
  readOnly: true,
  lineWrapping: true,
  gutters: ["CodeMirror-lint-markers"]
};

const value = defineModel("value");
const jsonValue = computed({
  get() {
    return JSON.stringify(value.value);
  },
  set(newValue) {
    value.value = JSON.parse(newValue);
  }
});
</script>

<style scoped>
.yaml-editor {
  height: 100%;
  position: relative;
}

.yaml-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
</style>
